import { VueComponent, Prop } from 'vue-typescript'
import { AboutComponent } from '../../views/about/about'
import { azureBlob } from '../../service/azure-blob-upload'
import {dataService} from '../../service/dataService'


var VueTables = require('vue-tables');
Vue.use(VueTables.client,{
    filterable:false,
    compileTemplates:true,
    pagination: {
     dropdown:false,
    },
    texts:{
     count:'{count} 条',
    }  
});

@VueComponent({
    template: require('./orderManageDetail.html'),
})

 export class OrderManageDetailComponent extends Vue {
    el:'#orderManageDetail'
    components:({
        AboutComponent:AboutComponent,
        orderManageDetailTable:any,
        vclienttable:any
    })

    //v-model初始化
    //详情页面的id
    id:string;
    //订单编号
    orderId:string='';
    //发货发布时间
    orderTime:string='';
    //紧急程度
    urgency:string='';
    urgencyUnit:string='';
    //发货计划人
    consignor:string='';
    //发货计划热电话
    consignorPhone:string='';
    //发布内容
    content:string='';
    //所需车型
    carType:string='';
    //所需车长
    carLength:string='';
    //承运方式
    carrierCategory:string='';
    //装车效果
    loadingEffect:string='';

    //获取订单详情数据
    orderDetail=[];
    //总线路列表处获取到的省市区信息
    shipProvinceW:string='';
    shipCityW:string='';
    shipAreaW:string='';
    endProvinceW:string='';
    endCityW:string='';
    endAreaW:string='';
 
    //总线路查看详情中数据
    //弹框中的
    OData={};
    goodsNumUnit2:string='';
    goodsNumUnit1:string='';
    viaAddressDe:string='';
    //详情时获取的
    viaAdd:string='';
    orderDate={};     
    goodsUnitO:string='';//货物数量单位
    goodsUnitT:string='';
    //总线路详情中的省市区下拉数据
    shipProvinceList=[];
    shipCityList=[];
    shipAreaList=[];
    endProvinceList=[];
    endCityList=[];
    endAreaList=[];
    
    


    //子线路查看详情中数据
    childDate=[];
    CDate={};
    //详情时获得的
    childGoodsUnit:string='';//获取数量单位
    childGoodsUnit2:string = ''
    receivablePriceU:string = '';
    projectUnit:string='';
    viaAddressChild:string='';
    settleWay:string='';
    includeTax:string=''

    //弹框中获取的
    receivablePriceUnit:string='';
    projectU:string = '';
    viaAddressC:string='';
    settleWayC:string='';
    includeTaxC:string=''
    //省市区
    //子线路详情中的省市区下拉数据
    shipProvinceList2=[];
    shipCityList2=[];
    shipAreaList2=[];
    endProvinceList2=[];
    endCityList2=[];
    endAreaList2=[];
    //子线路列表处获取到的省市区信息
    shipProvinceW2:string='';
    shipCityW2:string='';
    shipAreaW2:string='';
    endProvinceW2:string='';
    endCityW2:string='';
    endAreaW2:string='';


    //货物数量单位
    childUnit:string = '';
    childUnit2:string='';


    //承运商车辆信息 显示，隐藏
    carriershow:boolean = true;
    status:string="";

    //承运商车辆信息
    carrierCarCode:string='';
    carrierCarLength:string='';
    carrierCarType:string=''

    //总线路货物信息
    columns=['shipAddress','viaAddress','deliveryAddress','shipTime','arriveTime','mileage','goodsTypeName','goodsName','goodsNum','operation']
    totalData1= []       
    options= {
    headings:{
        shipAddress:"发货地址",
        viaAddress:"中转地",
        deliveryAddress:"送货地址",
        shipTime:"发货时间",
        arriveTime:"到货时间",
        mileage:"里程数",
        goodsTypeName:"货物类别",
        goodsName:"货物名称",
        goodsNum:"货物数量",
        operation:'操作'
    },
    templates: {
        operation: function(row) {
          return `<a data-toggle="modal" data-target="#orderTotal"  @click='$parent.orderTotal(${row.id})'  title="查看详情"  class="glyphicon glyphicon-eye-open  text-info"></a>`
        }
      },
      
    };

    orderTotal=function(){
        this.OData=this.orderDate;
        //货物数量单位
        this.goodsNumUnit1 = this.OData.goodsNumUnitStr  
        //货物数量单位2
        this.goodsNumUnit2 =  this.OData.goodsNumUnitTwoStr
        //中转地
        this.viaAddressDe = this.getViaAddress(this.OData.viaAddressList)
        
    }

    //获取中转地
    getViaAddress=function(viaList){
        var addre="";
        for(var i=0;i< viaList.length;i++){

            addre = addre +  (viaList[i].province  + viaList[i].city +  viaList[i].county )
            if(i != viaList.length - 1){
                addre += "；";
            }           

        }
        return addre;
    }


    //子线路货物信息
    columns2=['shipDetail','viaListData','deliverDetail','goodsTypeName','goodsName','tonnageRange','goodsNum','settle','settlementType','operation']
     @Prop
    orderChildData= []
    options2= {
    headings:{
        shipDetail:"发货地址",
        viaListData:"中转地",
        deliverDetail:"送货地址",
        goodsTypeName:"货物类别",
        goodsName:"货物名称",
        tonnageRange:"吨位范围",
        goodsNum:"货物数量",
        settle:'结算单位',
        settlementType:'结算方式',
        operation:'操作'
    },
    templates: {
        operation: function(row) {
          return `<a data-toggle="modal" data-target="#orderChildren" @click='$parent.orderChildE(${row.index})'  title="查看详情" class="glyphicon glyphicon-eye-open  text-info"></a>`
        }
      },
    };
    //查看子单详情
    orderChildE=function(id){  
        this.CDate = this.childDate[id]
        //货物数量
        this.childUnit= this.CDate.goodsUnitStr 
        this.childUnit2 =  this.CDate.goodsUnitTwoStr  
        // 单价单位 
        this.receivablePriceUnit = this.CDate.receivablePriceUnitStr
        //工程总量单位
        this.projectU = this.CDate.projectMaxUnitStr
        //中转地
        this.viaAddressC = this.getViaAddress(this.CDate.viaList); 
        //结算方式
        this.settleWayC = this.CDate.settlementTypeStr
        //含税
        this.includeTaxC = this.CDate.includeTaxStr 
    
    }

    sasUrl:string='https://sinostoragedev.blob.core.chinacloudapi.cn/avatar-container?sv=2016-05-31&sr=c&sig=nUNfvCUrZ%2F%2Bjuc%2Fesjjl0tXw7nY4E4JJJ8jD7PBSUjI%3D&st=2017-01-26T06%3A19%3A15Z&se=2017-01-27T06%3A24%3A15Z&sp=racwl';
    imageLists=[];
    object:{default:string} = {default: 'Default object property!'}; //objects as default values don't need to be wrapped into functions
    imageColumns =['name','rate','state','operation'];//'image',//上传显示图片 'size',//
    imageOptions= {
    headings:{
        // image:'图片',
        name:"名称",
        rate:"进度",
        state:"状态",
        operation:'操作'
    },// size:"大小",
    templates: {
        operation: function(row) {  
                      
            return `<button id="page_orderManagent_detail_Driveruploader" type="button" class="btn btn-primary btn-xs" @click="$parent.downLoad(${row.index})">
                        <span class="fa fa-cloud-download"></span> 下载
                    </button>`
        },
        // image:function(row){
        //     return `<div class="img-thumbnail" style="position:relative">
        //                 <img class="img-responsive" src="${row.path}" style="width:236px;height:298px"/>
        //             </div>`
        // }
        state:function(row){
            return `<span class='glyphicon glyphicon-ok text-success' id="${row.id}" title='状态显示'></span>`;
        },
        rate:function(row){
            return `<div class="progress" style="width:60%"><div class="progress-bar progress-bar-uploadFile" id='${row.id}progressBar' role="progressbar" style="width:100%"></div></div>`;
        }
      },
    };

    //下载附件
    downLoad=function(index){
      var imageID = this.imageLists.filter(t=>t.index==index)[0].id;
      //console.log(imageID) 
      window.location.href = dataService().baseUrl+ "Attachment/getAttachment/"+ imageID
    }

   @Prop
   customerUnit:string;
   enterpriseid:string;

    ready(){
        //客户单位初始化
        //this.customerUnit = window.sessionStorage.getItem("userName");
        //this.enterpriseid = window.sessionStorage.getItem("enterpriseid");
        //console.info('$route.path',this.$route.path);
    
        this.status=this.$route.query.status;
        this.id = this.$route.query.id;

         
         $("div").remove(".VuePagination");

        //订单详情的数据
        dataService().Order.getOrder(this.id).then((res)=>{
            //订单数据
             this.orderDetail= res;  

         //承运商车辆信息 显示，隐藏
         //已派车、待发货、已发货、货已送达显示;  派车中，订单终结不显示。  
         if(res.orderStatus == "1" || res.orderStatus == "4" || res.orderStatus == "8" ){ this.carriershow=false }
         else{ this.carriershow = true }



            //订单编号
            this.orderId = res.orderId;
            //下单时间
            this.orderTime = res.creationTime;
            //紧急程度
            this.urgency = res.responseTime;
            //紧急程度单位
            this.urgencyUnit = res.responseTimeUnit;
            //客户单位初始化
            this.customerUnit = res.clientName;
            //发货计划人
            this.consignor = res.consignorName;
            //发货人电话
            this.consignorPhone = res.consignorPhone;
            //发货内容
            this.content = res.content;

            //总线路列表数据          
            this.viaAdd = this.getViaAddress(res.viaAddressList);

            var orderTotalList={
                shipAddress:res.originAddress,
                viaAddress:this.viaAdd ,
                deliveryAddress:res.destinationAddress,
                shipTime:res.shipTime,
                arriveTime:res.arriveTime,
                mileage:res.mileage,
                goodsTypeName:res.goodsTypeName,
                goodsName:res.goodsName,
                goodsNum:res.goodsNum + res.goodsNumUnitStr
            }
            this.totalData1=[orderTotalList]

            //总线路查看详情里的数据(在获取详情时得到的数据)
            this.orderDate = res; 
            this.goodsUnitO = res.goodsNumUnit;
            this.goodsUnitT = res.goodsNumUnitTwo
            

            this.shipProvinceW = res.shipProvinceStr;
            this.shipCityW= res.shipCityStr;
            this.shipAreaW = res.shipAreaStr; 
            this.endProvinceW = res.deliverProvinceStr;
            this.endCityW = res.deliverCityStr;
            this.endAreaW = res.deliverAreaStr


            //子线路列表数据
            this.childDate = res.items;
            var orderChildList=[];
            for(var i=0;i<res.items.length;i++){
                var orderChild = res.items[i];
                this.childGoodsUnit = orderChild.goodsUnit;//传给弹框中的数量单位
                this.childGoodsUnit2= orderChild.goodsUnitTwo;
                this.receivablePriceU = orderChild.receivablePriceUnit;
                this.projectUnit = orderChild.projectMaxUnit
                this.viaAddressChild= orderChild.viaList
                
                this.settleWay = orderChild.settlementTypeStr
                this.includeTax = orderChild.includeTaxStr

                this.shipProvinceW2 = orderChild.originProvinceStr;
                this.shipCityW2 = orderChild.originCityStr;//Str
                this.shipAreaW2 = orderChild.originCountyStr; 
                this.endProvinceW2 = orderChild.destinationProvinceStr;
                this.endCityW2 = orderChild.destinationCityStr;
                this.endAreaW2 = orderChild.destinationCountyStr 

                orderChildList[i]={
                    shipDetail:orderChild.originAddress,
                    viaListData:this.getViaAddress(this.viaAddressChild),
                    deliverDetail:orderChild.destinationAddress,
                    goodsTypeName:orderChild.goodsTypeName,
                    goodsName:orderChild.goodsName,
                    tonnageRange:orderChild.tonnageRange,
                    goodsNum:orderChild.quantityOfGoods + orderChild.goodsUnitStr ,
                    settle:orderChild.settle,
                    settlementType:this.settleWay,
                    index:i
                }
            }
            this.orderChildData = orderChildList;
      

            //所需车辆信息
            this.carType= res.vehicleTypeStr
            this.carLength = res.carLengthStr
            this.carrierCategory = res.carriageWayStr
            this.loadingEffect =res.loadingEffect
            //
            this.imageLists=[];
            //附件列表
            if(res.attachmentList){
                res.attachmentList.forEach((item,index)=>{
                    item.index=index;
                    this.imageLists.push(item);
                })
            }

            //备注信息

            //承运商车辆信息
            this.carrierCarCode =res.carrierCarCode
            this.carrierCarLength = res.carrierCarLengthStr
            this.carrierCarType = res.carrierVehicleTypeStr;
            $("div ").remove(".VuePagination");

        },(rej)=>{

        })
    }


   
    package:string = 'vue-typescript';
    repo:string = 'https://github.com/itsFrank/vue-typescript';

    
 }

  